<template>
	<view class="content">
		<!-- 案件主体信息 -->
		<!-- 编辑案件主体弹窗 -->
		<view class="editPopup" >
				<view class="popup-con" scroll-y="true" style="overflow: visible;">
					<view class="od-box" style="padding-top: 0;height: 100vh;">
						<view class="od-title" v-if="type=='1'&&userInfo.is_fawu"><text class="gray red" style="font-size: 26rpx;">(请先联系委托人确定后再改)</text>
						</view>
						<view class="od-item marginbottom10 input" v-if="type=='1'">
							<view class="item-right">
                <u-input v-model="requirement" type="textarea" :border="true" :maxlength="500" :clearable="false" :auto-height="true" :placeholder="userInfo.is_fawu?'请填写委托人要律师帮Ta实现什么结果':'请填写您要律师帮您实现什么结果'"/>
							</view>
						</view>

						<view v-for="(item,index) in clientInfo" :key="index"  v-if="type=='2'">
							<view class="case-title">委托人 {{clientInfo.length>1?(index+1):''}}

								<view v-if="clientInfo.length > 1 && index != 0 " class="title-del" @click="deleteClientInfo(index)">
									<view class="image-wrapper">
										<image src="@/static/img/delete.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>

							<view class="od-item marginbottom10">
								<view class="item-tip require">类型</view>
								<view class="item-right" style="align-items: center;">
									<view style="margin-right:20rpx" @click="item.self_type=!item.self_type">
										<image v-if="!item.self_type" class="check-img" src="@/static/img/icon/icon_check.png" mode="aspectFit"></image>
										<image v-else class="check-img" src="@/static/img/icon/icon_checked.png"  mode="aspectFit"></image>
										<text>自然人</text>
									</view>
									<view class="" @click="item.self_type=!item.self_type">
										<image v-if="item.self_type" class="check-img" src="@/static/img/icon/icon_check.png" mode="aspectFit"></image>
										<image v-else class="check-img" src="@/static/img/icon/icon_checked.png"  mode="aspectFit"></image>
										<text>非自然人</text>
									</view>

								</view>
							</view>

							<!-- <view v-if="!item.self_type"> -->
								<view class="od-item marginbottom10">
									<view class="item-tip require">身份</view>
									<view class="item-right" @click="changeshenfen(index)">
										<view class="service-list inline-list" v-if=" item.self_shenfen">
											<view class="service-item active" style="width: auto;padding: 0 10rpx; min-width:200rpx">{{item.self_shenfen}}</view>
										</view>
										<view class="item-txt gray" v-else>请选择</view>
										<view class="item-nav">
											<image src="@/static/img/right.png" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="od-item marginbottom10">
									<view class="item-tip require" v-if="item.self_type">姓名</view>
									<view class="item-tip require" v-if="!item.self_type">名称</view>
									<view class="item-right">
										<view class="item-txt"><input type="text" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.self_name" /></view>
									</view>
								</view>
								<view class="od-item marginbottom10">
									<view class="item-tip require" v-if="item.self_type">证件号码</view>
									<view class="item-tip require" v-if="!item.self_type">联系人</view>
									<view class="item-right">
										<view class="item-txt" v-if="item.self_type">
											<input type="number" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.self_code" />
										</view>
										<view class="item-txt" v-if="!item.self_type">
											<input type="text" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.self_code" />
										</view>
									</view>
								</view>
								<view class="od-item marginbottom10">
									<view class="item-tip require">联系电话</view>
									<view class="item-right">
										<view class="item-txt"><input type="tel" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.self_tel" /></view>
									</view>
								</view>
							<!-- </view> -->
						</view>

						<!-- <view class="service-list" style="margin-bottom: 0;"  v-if="type=='2'">
							<view class="service-item active" style="width: 300rpx; margin: auto;" @click="addClient">
								增加委托人</view>
						</view> -->


						<view v-for="(item,index) in otherInfoLIst" :key="index"  v-if="type=='3'">
							<view class="case-title">
								对方当事人{{otherInfoLIst.length>1?(index+1):''}}
								<view v-if="otherInfoLIst.length > 1 && index != 0 " class="title-del" @click="deleteOtherInfo(index)">
									<view class="image-wrapper">
										<image src="@/static/img/delete.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<view class="od-item marginbottom10">
								<view class="item-tip require">类型</view>
								<view class="item-right" style="align-items: center;">
									<view style="margin-right:20rpx" @click="item.dui_type=!item.dui_type">
										<image v-if="!item.dui_type" class="check-img" src="@/static/img/icon/icon_check.png" mode="aspectFit"></image>
										<image v-else class="check-img" src="@/static/img/icon/icon_checked.png"  mode="aspectFit"></image>
										<text>自然人</text>
									</view>
									<view class="" @click="item.dui_type=!item.dui_type">
										<image v-if="item.dui_type" class="check-img" src="@/static/img/icon/icon_check.png" mode="aspectFit"></image>
										<image v-else class="check-img" src="@/static/img/icon/icon_checked.png"  mode="aspectFit"></image>
										<text>非自然人</text>
									</view>

								</view>
							</view>
							<!-- <view v-if="!item.dui_type"> -->
								<view class="od-item marginbottom10">
									<view class="item-tip require" v-if="item.dui_type">姓名</view>
									<view class="item-tip require" v-if="!item.dui_type">名称</view>
									<view class="item-right">
										<view class="item-txt"><input type="text" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.dui_name" /></view>
									</view>
								</view>
								<view class="od-item marginbottom10">
									<view class="item-tip require" v-if="item.dui_type">证件号码</view>
									<view class="item-tip require" v-if="!item.dui_type">联系人</view>
									<view class="item-right">
										<view class="item-txt" v-if="item.dui_type">
											<input type="number" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.dui_code" />
										</view>
										<view class="item-txt" v-if="!item.dui_type">
											<input type="text" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.dui_code" />
										</view>
									</view>
								</view>
								<view class="od-item marginbottom10">
									<view class="item-tip require">联系电话</view>
									<view class="item-right">
										<view class="item-txt"><input type="tel" class="ipt" value="" placeholder="请输入"
												placeholder-class="placeholder" v-model="item.dui_tel" /></view>
									</view>
								</view>
							    </view>
						    <!-- </view> -->
						<view class="service-list" style="margin-bottom: 0;"  v-if="type=='3'">
							<view class="service-item active" style="width: 300rpx; margin: auto;" @click="addOther">
								增加对方当事人</view>
						</view>
						<button v-if="istianxie" type="default" style="position: fixed;bottom: 16px;width: 92%;" class="ok-btn" @click="confirmSave">确定</button>
            <button v-else type="default"  disabled style="position: fixed;bottom: 16px;width: 92%;" class="ok-btn">确定</button>

          </view>
				</view>


		</view>
		<!-- 我的身份 -->
		<u-select v-model="showIdent" mode="mutil-column-auto" :list="infoIdent" @confirm="confirmIdent"
			confirm-color="#FFC801"></u-select>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/common/mixins/specialist_order_state.js';
	import {
		share_coupon
	} from '@/common/mixins/share_coupon.js';
  import { mapGetters, mapMutations } from 'vuex';
	export default {
		mixins: [mixin, share_coupon],
		data() {
			return {
				info: {
					order: {}
				},
				order_id: '',
				requirement: '', //委托人诉求
				showIdent: false,
				infoIdent: [], //我的身份选择
				my_ident: {}, //我的身份
				clientInfo: [{
						self_name: '', //姓名
						self_code: '', //证件号码
						self_tel: '' ,//联系电话
						self_type:true,
            self_shenfen:'', // 身份
            my_ident:"" //身份值
					}],
				otherInfoLIst: [{
					dui_name: '', //姓名
					dui_code: '', //证件号码
					dui_tel: '' ,//联系电话
					dui_type:true,
				}],
				isEdit: false, //法务是否已经修改了订单
				orderText: '更改订单',
                lock:true,
        index:'',//确定是第几个委托人
        type:'',
        istianxie:false
			};
		},
    computed: {
      ...mapGetters(['userInfo'])
    },
    watch:{
      requirement(val){
        if(this.type=='1'){
          if(val){
            this.istianxie = true
          }else{
            this.istianxie = false
          }
        }
      },
      clientInfo: {
        handler(value) {
          if(this.type=='2'){
            for (let i = 0; i < this.clientInfo.length; i++) {
              if (this.clientInfo[i].self_name&&this.clientInfo[i].self_code&&this.clientInfo[i].self_tel&&this.clientInfo[i].my_ident) {
                this.istianxie = true
                return;
              }else{
                this.istianxie = false;
                return;
              }
            }
          }
        },
        deep: true
      },

      otherInfoLIst: {
        handler(value) {
          if(this.type=='3'){
            for (let i = 0; i < this.otherInfoLIst.length; i++) {
              if (this.otherInfoLIst[i].dui_name&&this.otherInfoLIst[i].dui_code&&this.otherInfoLIst[i].dui_tel) {
                this.istianxie = true
                return;
              }else{
                this.istianxie = false;
                return;
              }
            }
          }
        },
        deep: true
      },
    },
		onShow(){
			if(this.order_id){
				this.init();
			}
		},
    mounted(){
      if(this.$route.query.order_id){
        this.order_id = this.$route.query.order_id;
        this.init();
      }
      if (this.$route.query.order_id) {
        this.isEdit = true
      }
      this.type=this.$route.query.type;
      this.usertype = this.$route.query.usertype;
      if(this.type == "1"){
        uni.setNavigationBarTitle({
          title: '委托人诉求'
        })
      }
      if(this.type == "2"){
        uni.setNavigationBarTitle({
          title: '委托人'
        })
      }
      if(this.type == "3"){
        uni.setNavigationBarTitle({
          title: '对方当事人'
        })
      }
    },
		methods: {
      changeshenfen(index){
        this.index = index;
        this.showIdent = true;
      },
			async init() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.orderDetail', formData);
				this.info = res.data;
				if (res.data.order.status == 19) {
					this.orderText = '重新更改'
				}
				if (this.info.order.status == 20 || this.info.order.status == 19) {
					this.isEdit = false;
				}
				this.getOrderState(this.info);

				let formDataIdent = {
					token: uni.getStorageSync('token')
				};
				let resIdent = await this.$api('index.ident', formDataIdent);
				this.infoIdent = resIdent.data;
				// 案件主体初始化
				this.requirement = this.info.order.requirement;
				this.my_ident = {
					value: this.info.order.my_ident||'',
					label: this.info.order.my_ident_parent_text&&this.info.order.my_ident_text?`${this.info.order.my_ident_parent_text} ${this.info.order.my_ident_text}`:''
				};

				if (this.info.order.weituo_json) {
					this.clientInfo = JSON.parse(this.info.order.weituo_json);
				}
				// else{
				// 	this.clientInfo[0] = {
				// 		self_code: this.info.order.self_code||'',
				// 		self_name: this.info.order.self_name||'',
				// 		self_tel: this.info.order.self_tel||'',
				// 		self_type:true
				// 	}
				// }

				if (this.info.order.dui) {
					this.otherInfoLIst = this.info.order.dui;
				}
			},
			async confirmServiceOk() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.legal_sure', formData);
				if (res.code == 1) {
					this.isSpecialistServiceOk = true;
					this.$refs.popupServiceOk.close();
				}
			},
			async sureServiceOk(status, pop) {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token'),
					status: status
				};
				let res = await this.$api('index.legal_sure_over', formData);
				if (res.code == 1) {
					if (pop == 'popupSureServiceOk') {
						this.closePop('popupSureServiceOk');
						this.replace('/pages/specialist/user/service-ok', {
							order_id: this.order_id
						});
					} else if (pop == 'popupNoSureServiceOk') {
						this.closePop('popupNoSureServiceOk');
						this.isClientServiceOk = false;
						this.isSpecialistServiceOk = false;
					}
				}
			},
			async callVirtualTel() {
				let formData = {
					id: this.order_id,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.virtual_tel', formData);
				if (res.code == 1) {
					let phoneNumber = res.data.middleNumber;
					const nav = navigator.userAgent;
					if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
						phone.call(phoneNumber);
					} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
						this.$bridge.callhandler('call', phoneNumber, data => {});
					}
				}
			},
			confirmIdent(e) {
        this.clientInfo[this.index].self_shenfen =e[1].label +' ' +e[2].label;
        this.clientInfo[this.index].my_ident = e[2].value;
				this.my_ident = e[2];
			},
			addOther() {
				this.otherInfoLIst.push({
					dui_type: true,
					dui_name: '',
					dui_code: '',
					dui_tel: ''
				});
			},
			addClient(){
				this.clientInfo.push({
					self_type: true,
					self_code: '',
					self_name: '',
					self_tel: '',
          self_shenfen:'',
          my_ident:''
				});
			},


			async confirmSave() {
        uni.showLoading({
          title: '提交中'
        });
        if(this.lock){
          this.lock = false;
          if(this.type=='2'){
            for (let i = 0; i < this.clientInfo.length; i++) {
              if(this.clientInfo[i].self_type){
                continue
              }
              if (!this.clientInfo[i].self_name) {
                uni.showToast({
                  title: '请输入委托人姓名',
                  icon: 'none'
                });
                return;
              }
              if (!this.clientInfo[i].self_code) {
                uni.showToast({
                  title: '请输入委托人证件号码',
                  icon: 'none'
                });
                return;
              }
              if (!this.clientInfo[i].self_tel) {
                uni.showToast({
                  title: '请输入委托人联系电话',
                  icon: 'none'
                });
                return;
              }
              if (!this.clientInfo[i].my_ident) {
                uni.showToast({
                  title: '请选择委托人身份',
                  icon: 'none'
                });
                return;
              }
            }
          }
          if(this.type=='3'){
            for (let i = 0; i < this.otherInfoLIst.length; i++) {
              if (!this.otherInfoLIst[i].dui_name) {
                uni.showToast({
                  title: '请输入对方当事人姓名',
                  icon: 'none'
                });
                return;
              }
              if (!this.otherInfoLIst[i].dui_code) {
                uni.showToast({
                  title: '请输入对方当事人证件号码',
                  icon: 'none'
                });
                return;
              }
              if (!this.otherInfoLIst[i].dui_tel) {
                uni.showToast({
                  title: '请输入对方当事人联系电话',
                  icon: 'none'
                });
                return;
              }
            }
          }
          let formData = {
            id: this.info.order.id,
            token: uni.getStorageSync('token'),
            requirement: this.requirement,
            // my_ident: this.my_ident.value,
            weituo_json: JSON.stringify(this.clientInfo),
            dui: JSON.stringify(this.otherInfoLIst)
          };
          let res = await this.$api('index.edit_ident', formData);
          if(res.code){
            this.lock = true;
            uni.hideLoading();
          }
         if(this.usertype=='1'){
           this.replace('/pages/specialist/user/service-specialist', {order_id: this.info.order.id,status:this.info.order.status,});
         }else if(this.usertype == '2'){
           this.replace('/pages/client/user/service-specialist', {order_id: this.info.order.id,status:this.info.order.status,});
         }else{
           uni.navigateBack({
             delta: 1
           })
         }

        }
			},
			deleteOtherInfo(index) {
				if (index > 0) {
					this.otherInfoLIst.splice(index, 1);
				} else {
					uni.showToast({
						title: '至少有一个对方当事人',
						icon: 'none'
					});
				}
			},
			deleteClientInfo(index){
				if (index > 0) {
					this.clientInfo.splice(index, 1);
				} else {
					uni.showToast({
						title: '至少有一个委托人',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.check-img {
		width: 15px;
		height: 15px;
		margin-right: 6rpx;
		// margin-top:4px;
		position: relative;
		top: 6rpx;

	}
	::v-deep .uni-popup.editPopup {
		overflow: hidden;
		>view{background-color: #fff !important;}
		.uni-popup__wrapper{
			width: 100% !important;
			margin-top: 12% !important;
			overflow-y: scroll !important;
			z-index: 8888;
		}
		.popup-common-box{
			width: 100%;
			border-radius: 0px;
			height: 100%;
			z-index: 100;
			.popup-title{
				background-color: rgb(255, 200, 1);
				color: rgb(255, 255, 255);
				padding: 1px 3px;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				.title-txt{
					font-size: 17px !important;
					font-weight: normal;
				}
				.title-close{
					display: none;
				}
			}
			.popup-con{
				// height: 86%;
				height: 100% !important;
				max-height: 100%;
				width: 100% !important;
				overflow: auto !important;
			}
		}
	}


	.uni-scroll-view {
		overflow: visible !important;
	}

	.content {
		padding-bottom: 30rpx;
	}

	.textaligncenter {
		text-align: center;
	}

	.item-tip {
		line-height: 48rpx;
	}

	.od-title {
		flex-wrap: wrap !important;
	}

	.urge-order {
		width: 100%;
		margin-top: 20rpx;
		position: relative !important;

	}

	.case-title {
		margin-bottom: 10rpx;
		position: relative;
		padding-left: 30rpx;

		.title-del {
			.image-wrapper {
				width: 35rpx;
				height: 35rpx;

				image {
					vertical-align: middle;
					width: 100%;
					height: 100%;
				}
			}

			float: right;
		}

		&::before {
			content: '';
			position: absolute;
			width: 10rpx;
			height: 25rpx;
			background-color: $uni-color-primary;
			border-radius: 40rpx;
			left: 0;
			top: 8rpx;
		}
	}

	.gray {
		width: 400rpx !important;
		margin-left: 10rpx;
	}

	.red {
		color: #f20000;

	}
	::v-deep .textarea{
		//height: auto !important;
	}
	::v-deep .uni-textarea-compute, ::v-deep .uni-textarea-line {
		display: none;
	}
	//::v-deep .uni-textarea-textarea{
	//	position: relative!important;
	//}
	::v-deep .input{
		 .right-textarea{
			 .textarea{
				 border: 1px solid #eee;
				 padding: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			 }
			 .textarea-tip{
				 display: none;
			 }

			 .word-num{
				 right: 24rpx;
			 }
		}
	}
  ::v-deep .uni-textarea-textarea{
    overflow-y: auto!important;
  }
    .od-box .od-item .item-right .item-txt{margin-left:0!important;}
</style>
